<template>
  <view class="container">
    <view class="av-container">
      <u-avatar src="/static/index/me1.png" size="200" mode="square"></u-avatar>
    </view>
    <view class="name" v-if="userInfo.username">{{ userInfo.username }}</view>
    <view class="rank-info">
      <view v-if="userInfo.level">等级 {{ userInfo.level }}</view>
      <view v-if="userInfo.rank">排名 {{ userInfo.rank }}</view>
    </view>
    <view class="user-info">
      <view class="item-list">
        <text>我的积分</text>
        <view class="coin">{{ userInfo.coinCount }}</view>
      </view>
      <view
        class="list-wrap"
        v-for="(item, index) in listTile"
        :key="index"
        @click="doBussines(index)"
      >
        <view class="item-list">{{ item }}</view>
        <image src="../../static/index/arrow.png" class="img"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { httpGet } from "../../api/httpUtils.js";
import { loginOut, userInfo, myShares } from "../../api/constant.js";
export default {
  data() {
    return {
      listTile: ["我的收藏", "我的分享", "退出登录", "积分排行榜", "TODO"],
      pageIndex: 0,
      index: 1,
      userInfo: "",
    };
  },
  onLoad() {
    // this.getUserInfo()
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    doBussines(index) {
      if (index == 0) {
        this.myLovesList();
      } else if (index == 1) {
        //我的分享
        this.shareLists();
      } else if (index == 2) {
        this.exit();
      } else if (index == 3) {
        uni.navigateTo({
          url: "/pages/rank-list/rank-list",
        });
      } else {
        uni.navigateTo({
          url: "/pages/to-do/to-do",
        });
      }
    },
    async shareLists() {
      let shareRes = await httpGet(`${myShares}${this.index}/json`);
      console.log("分享结果=》" + shareRes);
    },
    async myLovesList() {
      uni.navigateTo({
        url: "/pages/my-collects/my-collects",
      });
    },
    async getUserInfo() {
      let res = await httpGet(userInfo);

      if (res.errorCode == -1001) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }

      this.userInfo = res.data;
    },
    async exit() {
      await httpGet(loginOut);

      uni.setStorageSync("token", "");
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
};
</script>
<style>
page {
  font-size: 32rpx;
}
</style>
<style lang="scss" scoped>
.container {
  .list-wrap {
    display: flex;
    align-items: center;

    .item-list {
      flex: 1;
    }

    .img {
      width: 40rpx;
      height: 40rpx;
      margin-left: auto;
    }
  }

  .user-info {
    padding: 32rpx;
    font-size: 32rpx;
    font-weight: 500;

    .item-list {
      height: 100rpx;
      border: 1px solid black;
      margin-bottom: 12rpx;
      text-align: center;
      display: flex;
      align-items: center;
      padding-left: 10rpx;

      .coin {
        margin-left: auto;
        margin-right: 32rpx;
      }
    }
  }

  .name {
    text-align: center;
    margin-bottom: 12rpx;
  }

  .av-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rank-info {
    display: flex;
    justify-content: center;

    > view {
      margin-right: 12rpx;
    }
  }
}
</style>
